<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="info"></div>
    <script type="text/javascript" src="./lib/jquery.js"></script>
    <script type="text/javascript" src="./lib/template-web.js"></script>
    <script id="template" type="text/html">
        <div>姓名：{{name}}</div>
        <div>生日：{{birthday|formateDate}}</div>
        <div>昵称：{{nickname|changeInfo}}</div>
        {{if gender===1}}
        <div>性别：男</div>
        {{else if gender===0}}
        <div>性别：女</div>
        {{else}}
        <div>性别：未知</div>
        {{/if}}
        <div>分数：{{@score}}</div>
        {{each hobby}}
        <div>索引：{{$index}};爱好{{$value}}</div>
        {{/each}}
    </script>
    <script>
        template.defaults.imports.formateDate = function(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return year + "-" + month + "-" + day;
        };
        template.defaults.imports.changeInfo = function(str) {
            var firstLetter = str.charAt(0).toUpperCase();
            var otherLetter = str.substr(1);
            return firstLetter + otherLetter;
        };
        var userInfo = {
            name: "张三",
            birthday: new Date(),
            nickname: "doudou",
            score: "<h1> 100 </h1>",
            hobby: ["001", "002", "003", "004"],
        };
        var str = template("template", userInfo);
        $("#info").html(str);
    </script>
</body>

</html>

</html>